<template>

  <!-- #ifdef APP-PLUS-->
  <u-sticky offset-top="0" zIndex="10000">
  <!-- #endif -->
    <!-- #ifdef H5 -->
    <u-sticky offset-top="-44" zIndex="10000">
    <!-- #endif -->
      <view>
        <up-navbar title="草稿箱" :safeAreaInsetTop="true" :placeholder="true" autoBack :titleStyle="{
          fontSize:'36rpx',
          color:'#202020'
        }">
          <template #right>
            <view class="u-nav-slot" @click="onClickS()" v-if="list.length>0">
              {{showSelect?'退出管理':'管理'}}
            </view>
          </template>
        </up-navbar>
        <view class="bgWhite">
          <up-tabs :list="tablist" @click="onTabClick" :scrollable="false" :current="currentTab" :inactiveStyle="{
        	           fontWeight: '400',
        	           fontSize: '30rpx',
        	           lineHeight:2.5,
        	           color: '#5C5C5C',
        	         }" :activeStyle="{
        	           fontWeight: '600',
        	           fontSize: '30rpx',
        	           lineHeight:2.5,
        	           color: '#202020',
        	         }" :lineHeight="5" lineColor="#00C1B9">
          </up-tabs>
        </view>
      </view>

    </u-sticky>
    <view class="pages drafts">
      <view v-for="(item, index) in list" :key="item.id" @click="bindClick(item, index)">
        <view class="u-flex u-col-center">
          <view v-if="showSelect" @click.stop="onSelectIem(item,index)">
            <image src="https://ossresource.miyingbl.com/def/ed2e620240527111733396.png" mode="" class="icon"
              v-if="item.select"></image>
            <image src="https://ossresource.miyingbl.com/def/aa610202405271115062316.png" mode="" class="icon" v-else>
            </image>
          </view>
          <view class="u-flex-1">
            <view class="card content-box">
              <view class="u-p-b-20 u-border-bottom">
                <view class="title u-line-1" v-if="item.title"> {{ item.title }}</view>
                <view class="content u-line-2" v-if="item.content&&item.type==1">{{ item.content }} <text
                    v-if="item.showAll" class="showAll">...<text v-if="item.showAll"
                      style="color:#00C1B9">全文</text></text></view>
                <view class="content u-line-2" v-if="item.text_area&&item.type==2">{{ item.text_area }} <text
                    v-if="item.showAll" class="showAll">...<text v-if="item.showAll"
                      style="color:#00C1B9">全文</text></text></view>
                <view class="images" v-if="item.link_url">
                  <view class="images_item" v-for="(item1, index1) in item.link_url" v-show="index1 < 3" :key="index">
                    <image :src="item1" mode="aspectFill"></image>
                  </view>
                </view>
                <view class="videoimage"  v-if="item.video">
                  <view class="imagesItem" v-for='(items,indexs) in item?.image' :key="index">
                    <image :src="items" mode="aspectFill"></image>
                  </view>
                  <image src="https://ossresource.miyingbl.com/def/4e600202406241142076397.png" mode="" class="playIcon"></image>
                </view>
              </view>
              <view class="card_bottom">
                <view class="time">{{formatDate(item?.create_time,'YYYY-MM-DD HH:mm')}}</view>
                <view class="editBtn" @click.stop="edit(item)" v-if="!showSelect">继续编辑</view>
              </view>
            </view>
          </view>
        </view>

      </view>

      <view v-if="list?.length == 0 && loadEnd">
        <image src="https://ossresource.miyingbl.com/def/a7eed202405231608191269.png" mode="" class="emptyImg"></image>
        <view class="nodata">暂无数据</view>
      </view>
      <view v-if="showSelect&&list?.length!=0">
        <view style="height: 150rpx;"></view>
        <view class="fixed-bottom u-flex u-col-center">
          <view @click="selectAllData()">
            <image src="https://ossresource.miyingbl.com/def/ed2e620240527111733396.png" mode="" class="icon u-m-r-10"
              v-if="selectAll"></image>
            <image src="https://ossresource.miyingbl.com/def/aa610202405271115062316.png" mode="" class="icon u-m-r-10"
              v-else></image>
          </view>
          <view class="u-flex-1 u-p-10">
            <view class="selectText" v-if="totalNum>0">已选中{{totalNum}}条</view>
            <view v-else> 全选</view>
          </view>
          <view class="del_btn" :class="totalNum>0?'active':''" @click="showModel=true">删除</view>
        </view>
      </view>
    </view>
    <h-modal titlea="确认删除吗？" @clear="showModel=false" @bind="delDrafts" :show="showModel"></h-modal>
</template>

<script setup>
  import {
    ref,
    nextTick,
    computed,
    watch
  } from 'vue'
  import {
    formatDate
  } from '@/utils/index'
  import {
    CoupeDraftsApi,
    socialLabelList,
    CoupeDraftsDelApi
  } from '@/api/social'
  import {
    onLoad,
    onShow,
    onPullDownRefresh,
    onReachBottom,
    onUnload,
    onBackPress
  } from '@dcloudio/uni-app'

  import {
    navigateTo,
    showToast,
    navigateBack
  } from '@/utils'
  onShow(() => {
    params.value.page = 1
    getList()
  })
  const showSelect = ref(false)
  const totalNum = ref(0)
  const selectAll = ref(false)
  const showModel = ref(false)
  const onClickS = () => {
    if (list.value.length == 0) return;
    showSelect.value = !showSelect.value
    nextTick(() => {
      if (!showSelect.value) {
        list.value = list.value.map(v => {
          return {
            ...v,
            select: false
          }
        })
        getNum()
      }
    })

  }
  const onSelectIem = (item, index) => {
    list.value[index].select = !item.select
    getNum()
  }
  const getNum = () => {
    let arr = list.value.filter(v => {
      return v.select
    })
    totalNum.value = arr.length ? arr.length : 0
    if (arr.length == list.value.length) {
      selectAll.value = true
    } else {
      selectAll.value = false
    }
    console.log(arr)
  }
  const selectAllData = () => {
    list.value = list.value.map(v => {
      return {
        ...v,
        select: !selectAll.value,
      }
    })
    getNum()
  }
  const tablist = ref([{
      name: '全部',
      id: 0
    }, {
      name: '科普',
      id: 2
    },
    {
      name: '帖子',
      id: 1
    }
  ])
  const list = ref([])
  const loadEnd = ref(true)
  const params = ref({
    page: 1,
    limit: 15,
  })
  const lastPage = ref(1)
  // 获取列表
  const getList = () => {
    loadEnd.value = false
    if (currentTab.value) {
      params.value.type = tablist.value[currentTab.value].id
    } else {
      delete params?.value?.type
    }
    CoupeDraftsApi(params.value).then((res) => {
      loadEnd.value = true
      lastPage.value = res.data.last_page
      let list1 = res.data.data.map(v => {
        if (v.text_area?.length > 47 && v.type == 2) {
          v.text_area = v.text_area.substr(0, 47)
          v.showAll = true
        }
        if (v.content?.length > 47 && v.type == 1) {
          v.content = v.content.substr(0, 47)
          v.showAll = true
        }

        return v;
      })
      list.value = params.value.page == 1 ? list1 : list.value.concat(list1)
    })
  }
  onReachBottom(() => {
    if (lastPage.value > params.value.page) {
      params.value.page++
      getList()
    }
  })
  // 当前tab
  const currentTab = ref(0)
  const onTabClick = (e) => {
    currentTab.value = e.index
    params.value.page = 1
    getList()
  }
  const getIds = () => {
    let arr = list.value.filter(v => {
      return v.select
    }).map(j => {
      return j.id
    })
    return arr
  }
  // 删除垃圾箱
  const delDrafts = async () => {
    let ids = await getIds()
    console.log(ids)
    if (ids.length > 0) {
      CoupeDraftsDelApi({
        ids: ids.join(","),
      }).then((res) => {
        if (res.code == 200) {
          params.value.page = 1
          getList()
          getNum()
          showModel.value = false
          uni.showToast({
            title: '删除成功',
            icon: 'none',
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    }

  }
  const edit = (item) => {
    console.log(item)

    // uni.$emit('editDrafts', item)
    uni.setStorage({
      key: 'editDrafts',
      data: item
    })
    if (item.type == 1) {
      navigateTo('/socials/issue/index')
    }
    if (item.type == 2) {
      navigateTo('/socials/article/article?editId=' + item.id)
    }
    // navigateBack()


  }
  const bindClick = (e, index) => {
    console.log(e)
    delDrafts(e, index)
  }
</script>
<style>
  page {
    background: #f6f6f6;
  }
</style>
<style scoped lang="scss">
  .drafts {
    .icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 25rpx;
      box-sizing: border-box;
    }

    .button-group--right {
      margin: 20rpx 0;
    }

    .u-swipe-action {
      .u-swipe-action-item {
        background: transparent;
        margin-top: 20rpx;
      }

      &__content {
        padding: 25rpx 0;

        &__text {
          font-size: 15px;
          color: $u-main-color;
          padding-left: 30rpx;
        }
      }
    }

    .btn_right {
      padding: 20rpx 0;
    }

    .slot-button {
      /* #ifndef APP-NVUE */
      display: flex;
      height: 100%;
      /* #endif */
      flex: 1;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0 52rpx;
      background-color: #ff5959;
      color: #fff;
      border-radius: 0rpx 15rpx 15rpx 0rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 0;
        bottom: 0;
        background-color: #fff;
        width: 30rpx;
        border-radius: 0rpx 15rpx 15rpx 0rpx;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .bgWhite {
    background: #fff;
  }

  .pages {
    width: 702rpx;
    margin: 0 auto;
    background: #F5F6F8;
  }

  .content-box {}

  .card {
    padding: 20rpx 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    background: #fff;
    margin: 20rpx 0;

    .title {
      font-weight: 500;
      font-size: 28rpx;
      color: #202020;
    }

    .content {
      margin-top: 15rpx;
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
      position: relative;

      text {
        font-size: 26rpx;
      }

      .showAll {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #fff;
      }
    }

    .images {
      margin-top: 15rpx;
      overflow: hidden;

      .images_item {
        width: 32%;
        height: 186rpx;
        border-radius: 5rpx;
        overflow: hidden;
        margin-right: 1.3%;
        float: left;

        image {
          width: 100%;
          height: 100%;
          border-radius: 5rpx;
          display: block;
        }
      }

      &:nth-child(3n+3) {
        margin-right: 0;
      }
    }

    .card_bottom {
      margin-top: 20rpx;
      display: flex;
      align-items: center;

      .time {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        flex: 1;
      }

      .editBtn {
        font-size: 28rpx;
        color: #00C1B9;
        // line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        width: 130rpx;
        // line-height: 40rpx;
        // background: #ffaa47;
        text-align: center;
        border-radius: 9rpx 9rpx 9rpx 9rpx;
      }
    }
  }
.videoimage{
        width: 100%;
        height: 370rpx;
        position: relative;
        margin-top: 10rpx;
        image{
          width: 660rpx;
          height: 370rpx;
          display: block;
        }
        .playIcon{
          position: absolute;
          top:0;
          right:0;
          left: 0;
          bottom: 0;
          margin: auto;
          width: 66rpx;
          height: 66rpx;
          display: block;
        }
      }
  .emptyImg {
    width: 240rpx;
    height: 200rpx;
    margin: 300rpx auto 30rpx;
    display: block;
  }

  .nodata {
    font-weight: 500;
    font-size: 24rpx;
    color: #AAAAAA;
    text-align: center;
  }

  .fixed-bottom {
    position: fixed;
    background-color: #fff;
    font-size: 26rpx;
    color: #AAA;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15rpx 25rpx;
    padding-bottom: calc(15rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(15rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

    .icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 25rpx;
      display: block;
    }

    .selectText {
      font-size: 26rpx;
      color: #202020;
    }

    .del_btn {
      font-size: 30rpx;
      line-height: 70rpx;
      text-align: center;
      width: 160rpx;
      height: 70rpx;
      background: #F5F6F8;
      color: #AAAAAA;
      border-radius: 34rpx;

      &.active {
        background: #00C1B9;
        color: #fff;
      }
    }
  }
</style>
